<template>
    <div class="app-container">
        <!-- 添加按钮 -->
        <div class="addDiv">
            <el-button type="primary"  @click="dialogVisible = true">添加</el-button>
        </div>
        <!-- 添加弹出窗 -->
        <el-dialog
            title="添加医生学历职称"
            :visible.sync="dialogVisible"
            :before-close="addHandleClose"
            width="30%">
            <!-- 输入框 -->
            <el-form :inline="true"
            :rules="rules"
            ref = addForm
            label-width="80px"
            label-position="right"
            :model="addForm">
                <el-form-item label="学历职称"  prop="name">
                    <el-input v-model="addForm.name"></el-input>
                </el-form-item>
                <el-form-item label="颜色"  prop="color">
                    <el-radio-group v-model="addForm.color">
                        <el-radio  label="1">紫色</el-radio>
                        <el-radio  label="2">蓝色</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="addHandleClose()">取 消</el-button>
                <el-button type="primary" @click="addSubmit()">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 列表展示 -->
        <el-table
            v-loading="tableLoading"
            :data="tableData"
            class="tableData"

            style="width: 100%">
            <el-table-column
            prop="name"
            label="学历职称"
            >
            </el-table-column>
            <el-table-column
            prop="color"
            label="颜色">
                <template slot-scope="scope">
                    {{scope.row.color | colorText}}
                </template>
            </el-table-column>
            <el-table-column
            prop="createdAt"
            label="创建时间">
            </el-table-column>
            <el-table-column align="center" label="职称状态" width="">
              <template slot-scope="scope">
                <el-switch
                  class="switchStyle"
                  v-model="scope.row.status"
                  @click.native="swithFn(scope.row.id,scope.row.status)"
                  active-color="#13ce66"
                  inactive-color="#eee"
                  :active-value="1"
                  :inactive-value="0">
                </el-switch>
              </template>
            </el-table-column>
            <el-table-column
              fixed="right"

              label="操作"
              width="120">
              <template slot-scope="scope">
                <el-button  type="text" @click="editBtn(scope.row)" size="small">编辑</el-button>
                <el-button v-show="!scope.row.status" type="text" size="small"  @click="deleteBtn(scope.row.id)">删除</el-button>
              </template>
            </el-table-column>
        </el-table>
        <!-- 修改弹出窗 -->
        <el-dialog
            title="修改医院等级"
            :visible.sync="editDialog"
            :before-close="editHandleClose"
            width="30%">
            <!-- 输入框 -->
            <el-form :inline="true"
            :rules="rules"
            ref = editForm
            label-width="80px"
            label-position="right"
            :model="editForm">
                <el-form-item label="医院等级" prop="name">
                    <el-input v-model="editForm.name"></el-input>
                </el-form-item>
                <el-form-item label="颜色"  prop="color">
                    <el-radio-group v-model="editForm.color">
                        <el-radio  label="1">紫色</el-radio>
                        <el-radio  label="2">蓝色</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="editHandleClose()">取 消</el-button>
                <el-button type="primary" @click="editSubmit()">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 分页 -->
        <div class="pagesCon">
            <div>
                <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="listForm.pageNum"
                :page-sizes="page_sizes"
                :page-size="listForm.limit"
                layout="total, sizes, prev, pager, next, jumper"
                :total="page_totals">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
import { saveMmkDoctorTags,findDoctorTagsList,updateMmkDoctorTags,deleteMmkDoctorTagsById } from '@/api/degreeTitles'

export default {
    name:"degreeTitles",
    data() {
      return {
        dialogVisible: false,//添加弹出窗显影
        editDialog:false,
        tableLoading:true,//table的loading层
        tableHeight:"",
        addForm:{
            name:"",
            color:"1"
        },//添加提交表单
        editForm:{
            id:"",
            name:"",
            color:"1"
        },
        page_sizes:[10,30,50,100],
        page_totals:60,
        listForm:{
            pageNum:1,
            pageSize:10,
        },
        rules: {
            name: [
                { required: true, message: '请输入医院等级', trigger: 'blur' }
            ],
            color: [
                { required: true, trigger: 'blur' }
            ]
        },
        tableData: []//table列表数据
      }
    },
    filters:{
          colorText : function (val) {
                if(val == "1"){
                    return "紫色"
                }else{
                    return "蓝色"
                }
           }
      },
    created(){
        this.hospList()
    },
    methods: {
        // 标签状态修改
        swithFn(id,status){
            let datas = {id,status}
            updateMmkDoctorTags(datas).then(res =>{
                if(res.data.code === 0){
                    this.$message({
                    message: '修改成功',
                    type: 'success'
                    });
                }else{
                    this.$message.error('修改失败');
                }
            })
        },
        // 等级添加
        addSubmit(){
            if(this.addForm.name){
                saveMmkDoctorTags(this.addForm).then(res => {
                    this.dialogVisible = false
                    this.addForm.name = ""
                    this.$refs["addForm"].resetFields();
                    if(res.data.code === 0){
                        this.$message({
                            message: '添加成功',
                            type: 'success'
                        });
                        this.hospList()
                    }else{
                        this.$message.error('添加失败');
                    }
                })
            }
        },
        //关闭添加弹窗
        addHandleClose(){
            this.dialogVisible = false
            this.$refs["addForm"].resetFields();
        },
        // 等级修改弹出窗
        editBtn(e){
            this.editForm.id = e.id
            this.editForm.name = e.name
            this.editForm.desc = e.desc
            this.editForm.color = e.color+""
            this.editDialog = true
        },
        //关闭修改弹窗
        editHandleClose(){
            this.editDialog = false
            this.$refs["editForm"].resetFields();
        },
        // 等级修改
        editSubmit(){
            if(this.editForm.name&&this.editForm.desc){
                updateMmkDoctorTags(this.editForm).then(res => {
                    this.editDialog = false
                    this.$refs["editForm"].resetFields();
                    if(res.data.code === 0){
                        this.$message({
                        message: '医院等级修改成功',
                        type: 'success'
                        });
                        this.hospList()
                    }else{
                        this.$message.error('医院等级修改失败');
                    }
                })
            }
        },
        //数据删除
        deleteBtn(id){
            this.$confirm('删除该条数据, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                let datas = {id}
                deleteMmkDoctorTagsById(datas).then(res =>{
                    if(res.data.code === 0){
                        this.$message({
                            message: '删除成功',
                            type: 'success'
                        });
                        this.hospList()
                    }else{
                        this.$message.error('删除失败');
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        //医院等级列表
        hospList(){
            this.tableLoading = true
            findDoctorTagsList(this.listForm).then(res=>{
                this.tableLoading = false
                this.page_totals = res.data.data.count
                this.tableData = res.data.data.list
            })
        },
        //改变页面条数
        handleSizeChange(val) {
            this.listForm.pageSize = val
            this.hospList()
        },
        //选择页数
        handleCurrentChange(val) {
            this.listForm.pageNum = val
            this.hospList()
        }
    },
  }
</script>
<style scoped>
.addDiv{height:60px;}
/* .tableData{height: calc(100vh - 310px);} */
.pagesCon{height: 40px;margin-top: 20px}
.pagesCon>div{float: right;}
</style>
